<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
<script src="<%=request.getContextPath()%>/js/jquery.min.js"
		type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/jquery.md5.js"
		type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/validation.js"
		type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/js/common.js"
		type="text/javascript"></script>
<script>
	
	 var contextPath = "<%=request.getContextPath()%>";
	 var emailVerify,passwordVerify,pwConfirmVerify,verificationVerify,userNameVerify;
	 $(function(){
		 	userNameVerify = new LiveValidation('userName', {onlyOnBlur: true});
		 	userNameVerify.add(Validate.Presence, { failureMessage: "请输入昵称"}  );
		    emailVerify = new LiveValidation('email' , {onlyOnBlur: true});
			emailVerify.add(Validate.Email, { failureMessage: "请输入正确的电子邮箱地址"} );
			emailVerify.add(Validate.Presence, { failureMessage: "请输入正确的电子邮箱地址"}  );
			passwordVerify = new LiveValidation('password', {onlyOnBlur: true});
			passwordVerify.add(Validate.Presence, { failureMessage: "请设置密码"} );
			passwordVerify.add( Validate.Length, { minimum: 8,maximum:20, tooShortMessage:"密码长度不少于8位", tooLongMessage:"密码长度不超过20位" } );
		  	pwConfirmVerify = new LiveValidation('passwordConfirm', {onlyOnBlur: true});
		  	pwConfirmVerify.add(Validate.Confirmation, { match: 'password',failureMessage: "确认密码输入不一致" } );
		  	pwConfirmVerify.add(Validate.Presence, { failureMessage: "请输入确认密码"} );
		  	verificationVerify= new LiveValidation('verification' , {onlyOnBlur: true});
		  	verificationVerify.add(Validate.Presence, { failureMessage: "请输入验证码"} );
	});
		
	
	 function submitRegister(form){

		 var a = LiveValidation.massValidate( [ emailVerify, passwordVerify, pwConfirmVerify,userNameVerify, verificationVerify ] );
		 var invalidSize = $('.LV_invalid_field').size();
		 if(invalidSize>0){
			 return;
		 }
		 checkRegist(form);

	 }

	 function checkRegist(form) {
		 
	 	var email = $('#email').val();
	 	var userName = $('#userName').val();
	 	var password = $('#password').val();
	 	var pswConfirm = $('#passwordConfirm').val();
	 	var verification = $('#verification').val();
	 	$.ajax({ 
	          type: "POST", 
	          url: contextPath + "/ajaxRegist", 
	          data:"user.email="+email + "&user.userName=" + userName + "&user.password=" + $.md5(password) + "&passwordConfirm=" + $.md5(pswConfirm) + "&verification="+ verification,
	          success: function(msg){ 
	 			msg = msg.replace("[","").replace("]","");
	 			var obj = $.parseJSON(msg);
	 			if(obj.registSuccess == 1) {
		 			window.location.href = contextPath + "/viewLogin";
			 	} else {
			 		if(obj.email == 0) {
		 				$('#email').addClass("LV_invalid_field");
		 				$('#email').next().removeClass("LV_valid");
		 				$('#email').next().addClass("LV_invalid");
		 				$('#email').next().text("邮箱已被注册");
						
			 		}
			 		if(obj.name == 0) {
			 			$('#userName').addClass("LV_invalid_field");
		 				$('#userName').next().removeClass("LV_valid");
		 				$('#userName').next().addClass("LV_invalid");
		 				$('#userName').next().text("昵称已被注册");
				 	}
			 		if(obj.pswConfirm == 0) {
			 			$('#passwordConfirm').addClass("LV_invalid_field");
		 				$('#passwordConfirm').next().removeClass("LV_valid");
		 				$('#passwordConfirm').next().addClass("LV_invalid");
		 				$('#passwordConfirm').next().text("输入密码不一致");
				 	}
			 		if(obj.verifyValid == 0) {
			 			$('#verification').addClass("LV_invalid_field");
		 				$('#verification').next().removeClass("LV_valid");
		 				$('#verification').next().addClass("LV_invalid");
		 				$('#verification').next().text("验证码错误");
		 				refreshCaptcha();
				 	}
				 }
	         } 
	     }); 
	 }
	 	 
</script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/account.css" />
</head>
<body>
  <div class="wrapper">
  <div class="header-bar">
  <div class="header content clearfix">
  	<button onclick="window.location.href='<%=request.getContextPath()%>/viewLogin'" type="button" class="btn-info" style=" margin: 20px 20px 20px 20px;height: 32px; width:100px;font-size: 13px;float: right;">登录</button>
  </div>
  </div>
  <div class="main content clearfix">
  <div class="sign-in">
<div class="signin-box">
  <h2>注册</h2>
  <form  id="loginform" action="<%=request.getContextPath()%>/regist" method="post">
<div class="email-div">
  <label for="email"><strong class="email-label">电子邮箱</strong></label>
  <input type="text" name="user.email" id="email" value="${user.email}">
  
</div>
<div class="name-div">
  <label for="username"><strong>昵称</strong></label>
  <input type="text" name="user.userName" id="userName" value="${user.userName}">
</div>
<div class="passwd-div">
  <label for="password"><strong class="passwd-label">密码</strong></label>
  <input type="password" name="user.password" id="password">
</div>
<div class="passwd-div">
  <label for="Passwd"><strong>确认密码</strong></label>
  <input type="password" name="passwordConfirm" id="passwordConfirm">
</div>
<c:if test="${user.gender == 0}"><c:set value="selected" var="male" /></c:if>
<c:if test="${user.gender == 1}"><c:set value="selected" var="female" /></c:if>
<div class="gender-div">
  <label for="gender"><strong>性别</strong></label>
  <select style="width: 100px" name="user.gender">
  	<option ${male} value="0">男</option>
  	<option ${female} value="1">女</option>
  </select>
</div>
<div class="verify_div">
	<label for="verification"><strong class="verify-label">验证码</strong></label>
	<img onclick="refreshCaptcha()" id="jcaptcha" src="jcaptcha.jpg" width="100" height="40"/> 
 	 <input type="text" name="verification" value="" id="verification"/>
 	 
</div>
  <button type="button" class="btn btn-danger" onclick="submitRegister(this.form)">注册</button>
</form>
<div>
	<c:forEach items="${error}" var="item">
		<span class="invalid_msg" style="text-align: center">${item}</span>
	</c:forEach>
</div>
  
</div>
  </div>
  <div class="product-info ">
<div class="product-headers">
  <h1 class="redtext">帐户</h1>
</div>
<p>注册帐户，享受 更多服务。
</p><p>已注册账户，请直接<a href="<%=request.getContextPath()%>/viewLogin"> 登录</a>。</p>
  </div>
  </div>
  </div>
</body>
</html>